<template>
  <div class="rank-list">
    <div v-for="(item,index) in rankList" :key="index" class="item">
      <div class="rank" :class="{
        'rank-1': index === 0,
        'rank-2': index === 1,
        'rank-3': index === 2
      }">{{ index + 1 }}</div>
      <div class="infos">
        <div class="name">{{ item.alarmName }}</div>
        <div class="line-box">
          <div class="line" :class="{
            'line-1': index === 0,
            'line-2': index === 1,
            'line-3': index === 2
          }" :style="{ width: (item.alarmNum * 100 / rankList[0].alarmNum) + '%' }"></div>
        </div>
      </div>
      <div class="value">{{ item.alarmNum }}</div>
    </div>
  </div>
</template>

<script>
import { deviceAlarmTopApi } from '@/api/'

export default {
  name: 'rank-list',
  data() {
    return {
      rankList: []
    }
  },
  mounted() {
    deviceAlarmTopApi().then(res => {
      this.rankList = res.data.data || []
    })
  }
}
</script>

<style lang="scss" scoped>
.rank-list {
  overflow: hidden;
  .item {
    display: flex;
    align-items: center;
    height: 0.44rem;
    .rank {
      width: 0.28rem;
      height: 0.16rem;
      line-height: 0.16rem;
      text-align: center;
      color: #FFFFFF;
      font-size: 0.15rem;
      position: relative;
      margin-right: 0.1rem;
      background-color: #20A6FF;
      &::before {
        content: '';
        border-bottom: 0.08rem solid #20A6FF;
        border-left: 0.14rem solid transparent;
        border-right: 0.14rem solid transparent;
        position: absolute;
        bottom: 100%;
        left: 0;
      }
      &::after {
        content: '';
        border-top: 0.08rem solid #20A6FF;
        border-left: 0.14rem solid transparent;
        border-right: 0.14rem solid transparent;
        position: absolute;
        top: 100%;
        left: 0;
      }
      &.rank-1 {
        background-color: #FF3838;
        &::before {
          border-bottom-color: #FF3838;
        }
        &::after {
          border-top-color: #FF3838;
        }
      }
      &.rank-2 {
        background-color: #e7c736;
        &::before {
          border-bottom-color: #e7c736;
        }
        &::after {
          border-top-color: #e7c736;
        }
      }
      &.rank-3 {
        background-color: #19d38c;
        &::before {
          border-bottom-color: #19d38c;
        }
        &::after {
          border-top-color: #19d38c;
        }
      }
    }
    .infos {
      flex: 1;
      overflow: hidden;
      .name {
        font-size: 0.14rem;
        color: #fff;
        line-height: 1.1;
        margin-bottom: 0.06rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 2rem;
      }
      .line-box {
        overflow: hidden;
        background-color: rgba(#66FFFF, .24);
        height: 0.04rem;
        width: 100%;
        .line {
          background-color: #1ca7ff;
          height: 100%;
          &.line-1 {
            background-color: #FF3838;
          }
          &.line-2 {
            background-color: #e7c736;
          }
          &.line-3 {
            background-color: #19d38c;
          }
        }
      }
    }
    .value {
      width: 0.5rem;
      text-align: right;
      font-size: 0.16rem;
      color: #FFFFFF;
    }
  }
}
</style>